<template>
	<view>
		<!-- 懒加载动画 -->
		<view style="background: #fff;min-height: 100vh;">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
			<navbar name="讲堂列表"></navbar>
			<!-- 图片 -->
			<view class="typearea" v-for="(item,index) in list" :key="index">
				<view class="every-list" @tap="vidionav(item,idx)">
					<view class="left-img">
						<u-lazy-load border-radius="10" height="187" img-mode="aspectFill" :image="item.albumCoverUrl">
						</u-lazy-load>
						<view class="video-img-box">
							<image src="https://bsyjk-pic.bsyjk.cn/l/F8C96B4B4CE6440AA0ADD678C455CCA5.png"
								style="width: 41upx;height: 41upx;" mode=""></image>
						</view>
					</view>
					<view>
						<view class="right-text text-line">
							{{item.albumName}}
						</view>
						<view class="eye-look">
							<view class="eyeImg-box">
								<image src="https://bsyjk-pic.bsyjk.cn/l/3016654B38674A31A70E382B2AEDB4BF.png"
									style="width: 43upx;height: 27upx;" mode=""></image>
							</view>
							<view class="look-num">
								{{item.readNum}}
							</view>
						</view>
					</view>
				</view>
				<view v-show="list.length-1!=index" class="lines"></view>
			</view>
			<view style="height: 100upx;">
				
			</view>
		</view>
	</view>
</template>
<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

	export default {
		components: {
			uLoading,
			uLazyLoad,

		},
		data() {
			return {
				loadingone:false,
				pageCurrent: 1,
				pageSize: 10,
				list: [],
			}
		},
		onLoad() {
			this.getByReceiver(1, this.pageCurrent, this.pageSize,false)
		},
		methods: {
			vidionav(item, idx) {
				uni.navigateTo({
					url: '/pages/subpackage/find/video-detail/video-detail?id=' + item.albumId
				})
			},
			getByReceiver(receiver, pageCurrent, pageSize,onReach) {
				this.loadingone = true;
				let _this = this;
				this.$cms.get(global.apiUrls.getByReceiver + '?receiver=' + receiver + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							if(onReach){
								_this.list =_this.list.concat(records);
							}else{
								_this.list = records;
							}
							_this.loadingone = false;
						}
					})
			},
			onReachBottom: function() { //分页加载
				this.getByReceiver(1,this.pageCurrent+=1,this.pageSize,true)
			},
		}
	}
</script>
<style lang="scss">
	.typearea {
		width: 654upx;
		margin: 0 auto;
	}

	.lines {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
		margin-top: 30upx;
	}

	.every-list {
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;

		.left-img {
			width: 332upx;
			height: 187upx;
			position: relative;

			.video-img-box {
				position: absolute;
				right: 10upx;
				margin-top: -50upx;
			}
		}

		.right-text {
			width: 300upx;
			height: 84upx;
			font-size: 30upx;
			line-height: 42upx;
			// background-color: #0081FF;
			margin-right: 4upx;
			color: #333333;
		}

		.eye-look {
			margin-top: 10upx;
			display: flex;
			align-items: center;
			margin-top: 62upx;

			.eyeImg-box {
				width: 43upx;
				height: 27upx;
			}

			.look-num {
				font-size: 26upx;
				color: #999999;
				margin-left: 12upx;
			}
		}

	}
</style>
